/**
 * 设置频道下拉菜单
 */
async function getChannelsList() {
  const res = await axios({url: '/v1_0/channels'})
  document.querySelector('.form-select').innerHTML = '<option value="" selected>请选择文章频道</option>' + res.data.channels.map(item => `<option value="${item.id}">${item.name}</option>`).join('')
}

// 页面打开就需要获取数据
getChannelsList()

/**
 *文章封面设置
 */
document.querySelector('.img-file').addEventListener('change', async ev => {
  const file = ev.target.files[0]
  const fd = new FormData()
  fd.append('image', file)
  const res = await axios({url: '/v1_0/upload', method: 'post', data: fd})
  // 设置封面并显示
  document.querySelector('.rounded').src = res.data.url
  document.querySelector('.rounded').classList.add('show')
  // 隐藏“+”元素
  document.querySelector('.place').classList.add('hide')
})
// 通过js调用上传封面元素的点击事件修改封面
document.querySelector('.rounded').addEventListener('click', () =>  document.querySelector('.img-file').click())

/**
 * 发布文章保存
 *  3.2 基于 axios 提交到服务器保存
 *  3.3 调用 Alert 警告框反馈结果给用户
 *  3.4 重置表单并跳转到列表页
 */
document.querySelector('.send').addEventListener('click', async ev => {
  // 收集表单数据
  const artForm = document.querySelector('.art-form')
  const data = serialize(artForm, {hash: true, empty: true})
  delete data.id
  data.cover = {type: 1, images: [document.querySelector('.rounded').src]}
  // 提交数据
  try {
    await axios({url: '/v1_0/mp/articles', method: 'post', data})
    myAlert(true, '文章发布成功')
    // 清空数据
    artForm.reset()
    document.querySelector('.rounded').src = ''
    document.querySelector('.rounded').classList.remove('show')
    document.querySelector('.place').classList.add('hide')
    // 清除富文本数据
    editor.setHtml('')
    // 跳转到指定页面
    setTimeout(() => location.href = '../content/index.html', 1500)
  } catch (err) {
    myAlert(false, err.response.data.message)
  }
})

/**
 * 编辑文章
 */
;(function (){
  //  发布文章页面接收参数判断
  const paramsStr = location.search
  console.log(paramsStr)
  const params = new URLSearchParams(paramsStr)
  console.log(params)
  params.forEach(async (value, key) => {
    // 当前有要编辑的文章 id 被传入过来
    if (key === 'id') {
      // 修改标题和按钮文字
      document.querySelector('.title span').innerHTML = '修改文章'
      document.querySelector('.send').innerHTML = '修改'
      // 获取文章详情数据并回显表单
      const res = await axios({
        url: `/v1_0/mp/articles/${value}`
      })
      // 组织仅仅需要的数据对象，为后续遍历回显到页面上
      const dataObj = {
        channel_id: res.data.channel_id,
        title: res.data.title,
        rounded: res.data.cover.images[0], // 封面图片地址
        content: res.data.content,
        id: res.data.id
      }
      // 遍历数据对象属性，映射到页面元素上，快速赋值
      Object.keys(dataObj).forEach(key => {
        if (key === 'rounded') {
          // 封面设置
          if (dataObj[key]) {
            // 有封面
            document.querySelector('.rounded').src = dataObj[key]
            document.querySelector('.rounded').classList.add('show')
            document.querySelector('.place').classList.add('hide')
          }
        } else if (key === 'content') {
          // 富文本内容
          editor.setHtml(dataObj[key])
        } else {
          // 用数据对象属性名，作为标签 name 属性选择器值来找到匹配的标签
          document.querySelector(`[name=${key}]`).value = dataObj[key]
        }
      })
    }
  })
})()
document.querySelector('.send').addEventListener('click', async e => {
  // 判断按钮文字，区分业务（
  if (e.target.innerHTML !== '修改') return
  // 修改文章
  const form = document.querySelector('.art-form')
  const data = serialize(form, {hash: true, empty: true})
  // 调用编辑文章接口，保存信息到服务器
  try {
    const res = await axios({
      url: `/v1_0/mp/articles/${data.id}`,
      method: 'PUT',
      data: {
        ...data,
        cover: {
          type: document.querySelector('.rounded').src ? 1 : 0,
          images: [document.querySelector('.rounded').src]
        }
      }
    })
    myAlert(true, '修改文章成功')
  } catch (error) {
    myAlert(false, error.response.data.message)
  }
})